<!DOCTYPE html>
<html>
<head>
    <title>TeacherEvaluationSumTable</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="stylesheet" href="../../css/bootstrap.min.css">
    <link rel="stylesheet" href="../../css/font-awesome.min.css">
    <link rel="stylesheet" href="../../plugins/jqgrid/ui.jqgrid-bootstrap.css">
    <link rel="stylesheet" href="../../plugins/ztree/css/metroStyle/metroStyle.css">
    <link rel="stylesheet" href="../../css/main.css">
    <script src="../../libs/jquery.min.js"></script>
    <script src="../../plugins/layer/layer.js"></script>
    <script src="../../libs/bootstrap.min.js"></script>
    <script src="../../libs/vue.min.js"></script>
    <script src="../../libs/validator.min.js"></script>
    <script src="../../plugins/jqgrid/grid.locale-cn.js"></script>
    <script src="../../plugins/jqgrid/jquery.jqGrid.min.js"></script>
    <script src="../../plugins/ztree/jquery.ztree.all.min.js"></script>
    <script src="../../js/common.js"></script>
</head>
<body>
<div id="rrapp" v-cloak>
    <div v-show="showList">
        <div class="grid-btn" >
            <div class="form-group col-sm-2 set-paddingLeft">
                <input type="text" class="form-control" v-model="q.key" @keyup.enter="query" placeholder="教师姓名/所属学院">
            </div>
            <div class="container-btn" style="margin-bottom: 20px;height: 34px;display: flex;align-items: center;">
                <a class="normal-btn search-color" @click="query">查询</a>
                <a class="normal-btn normal-color" id="exportExcel">导出</a>
            </div>
            <!--<a class="btn btn-primary" @click="add"><i class="fa fa-plus"></i>&nbsp;新增</a>-->
            <!--<a class="btn btn-primary" @click="update"><i class="fa fa-pencil-square-o"></i>&nbsp;修改</a>-->
            <!--<a class="btn btn-primary" @click="del"><i class="fa fa-trash-o"></i>&nbsp;删除</a>-->
        </div>
        <table id="jqGrid"></table >
        <div id="jqGridPager"></div>
    </div>

    <div v-show="!showList" class="" style="width: auto">
        <div style="display: flex;flex-direction: row; align-items: center;">
            <div  class="teacher-info">{{title}}</div>
            <section style="margin-left: 20px">
                <input type="button" class="btn btn-warning" @click="reload" value="返回"/>
            </section>
        </div>
        <div class="panel-body" style="padding-left: 0;">
            <!-- <div id="TeacherEvaluationEntity">
                <div v-for="EvaluationType in teacherEvaluationEntity" style="display: flex;align-items: center;margin-top: 50px">
                    <section class="type-bg">{{EvaluationType.evaluationTypeName}}</section>
                    <div v-for="(content,index) in EvaluationType.content" v-show="EvaluationType.content[index].level" style="display: flex;position: relative;top: 42px">
                        <section  class="ball-style">{{content.evaluationLevelName}}</section>

                        <div v-for="levelContent in content.levelContent" class="item-bg">
                            {{levelContent.evaluationContentName}}
                        </div>
                    </div>
            </div> -->

            <table class="eva-table" >
                <tr>
                    <th>分类</th>
                    <th>等级</th>
                    <th>评教详情</th>
                </tr>
                <tr v-for="EvaluationType in teacherEvaluationEntity">
                    <td>{{EvaluationType.evaluationTypeName}}</td>
                    <td  v-for="(content,index) in EvaluationType.content" v-show="EvaluationType.content[index].level">
                            <span class="table-public-block" :class="typeColor(content.evaluationLevelName)">
                            {{content.evaluationLevelName}}
                            </span>
                    </td>
                    <td v-for="(content,index) in EvaluationType.content" v-show="EvaluationType.content[index].level">
                            <span class="table-public-block" :class="typeColor(content.evaluationLevelName)" v-for="levelContent in content.levelContent" style="margin: 0 4px">
                                {{levelContent.evaluationContentName}}
                            </span>
                    </td>
                </tr>
            </table>

        </div>

    </div>

</div>
</div>

<script src="../../js/modules/echarts/teacher_evaluation_echarts.js?v=1.3"></script>
</body>
<style type="text/css">
    .table-public-block{
        /*font-size: 12px!important;*/
        color: white;
        padding: 6px 8px;
        border-radius: 4px;
        text-align: center;
    }
    .excellent{
        background-color: #348ef3;
    }
    .secondary{
        background-color: #ffa809;
    }
    .bad{
        background-color: #f83f3f;
    }
    .eva-table{
        border:1px solid #a8a8a8;
        margin-left: 0;
        /*background-color: #f5f5f5*/
    }
    .eva-table th,.eva-table td{
        border:1px solid #a8a8a8;
        height: 46px;
        padding: 2px 14px;
        text-align: center;
    }
    .eva-table th{
        color: #333333;
    }
    .eva-table td{
        color: #3d3d3d
    }
    .item-bg{
        color: white;
        background-color: #ffa809;
        margin: 0 10px;
        padding: 4px 6px;
        border-radius:3px;
        height: 28px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        top: 4px
    }
    .ball-style{
        width: 34px;
        height: 34px;
        background-color: #3980eb;
        padding: 4px;
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius:50%;
    }
    .type-bg{
        color: white;
        background-color: #52b3ef;
        margin: 0 10px;
        padding: 4px 6px;
        border-radius:3px;
        height: 28px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        top: 4px
    }
    .teacher-info{
        background-color: #ececec;
        height: 36px;
        line-height: 36px;
        padding: 0 8px
    }
</style>
</html>